#{extends 'main.html' /}
#{set title:'Ajouter une livre' /}

<div id="create_book_form">
	#{form @bookmngt.add(), method:'POST', id:'createBookForm', enctype: 'multipart/form-data'}
	
		#{ifErrors}
		  <div class="error">
		   <p><strong>Oops…</strong> Veuillez corriger les erreurs indiquées avant d'essayer à nouveau.</p>
		  </div>
		#{/ifErrors}
		
		#{field 'book.title'}
		<p>
		  <label>Titre : </label>
		  <input type="text" id="${field.id}" name="${field.name}" value="${flash[field.name]}" class="${field.errorClass}" />
		</p>
		#{/}
		
		<p>
		  <label>Série : </label>
		  #{select 'book.collection.id', items:collectionList, valueProperty:'id', labelProperty:'title', id:'collection_for_book' }
		  #{option ''} - #{/option}
		  #{/select}
		  <button id="cmd_add_collection" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Ajouter une série</button>
		</p>
		
		<p>
		  <label>Auteur : </label>
		  #{select 'book.author.id', items:authorList, valueProperty:'id', labelProperty:'completename', id:'author_for_book' }
		  #{option ''}...#{/option}
		  #{/select}
		  <span class="error">#{error 'book.author' /}</span>
		  <button id="cmd_add_author" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Ajouter un auteur</button>
		</p>
		
		
		#{field 'book.year'}
		<p>
		  <label>Année de sortie : </label>
		  <input type="text" id="${field.id}" name="${field.name}" value="${flash[field.name]}" class="${field.errorClass}" />
		  <span class="error">#{error 'book.year' /}</span>
		</p>
		#{/}
		
		#{field 'coverFile'}
		<p>
			<label>Couverture : </label>
			<input type="file" id="${field.id}" name="${field.name}" value="${flash[field.name]}" />
		</p>
		#{/}
		
		<div class="btn-container">
			<input class="btn ok ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Ajouter" />
			<button class="btn cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Annuler</button>
		</div>
	#{/form}
	
	<script language="javascript" type="text/javascript">
		$('.btn-container .btn.cancel').click(function() {
			console.log("TODO");
			return false;
		});
		
		var addCollectionAction = #{jsAction @collectionmngt.addcollectionform(':from') /}
		$('#cmd_add_collection').click(function() {
			window.location = addCollectionAction({from: '${from}'});
			return false;
		});
		
		var addAuthorAction = #{jsAction @author.addform(':from') /}
		$('#cmd_add_author').click(function() {
			window.location = addAuthorAction({from: '${from}'});
			return false;
		});
		
		// fill fields (select fields) in case of error
		$('#collection_for_book').val('${flash.get('book.collection.id')}');
		$('#author_for_book').val('${flash.get('book.author.id')}');
	</script>
</div>